<script setup>
import { useI18nStore } from '@/stores';
const i18nStore = useI18nStore();
</script>

<template>
  <div class="overflow-x-hidden">
    <!-- 头部导航 -->
    <div class="auto pc:max-w-[1200px] mobile:text-4xl mobile:px-10">
      <Nav />
    </div>
    <div class="banner mt-[60px]">
      <Banner
        :title="i18nStore.translate('index16')"
        :button="i18nStore.translate('index18')"
        to="register"
      >
        <div class="mb-[20px] font-normal mobile:px-[20px]">
          {{ i18nStore.translate('index17') }}
        </div>
      </Banner>
    </div>

    <div
      class="auto pc:max-w-[1200px] mobile:text-4xl mobile:px-10 text-center"
    >
      <h1 class="text-[42px] font-bold mt-[30px] mb-[6px] mobile:text-[24px]">
        {{ i18nStore.translate('index19') }}
      </h1>
      <p class="mb-[40px] mobile:text-base">
        {{ i18nStore.translate('index20') }}
      </p>
      <ul class="text-center pc:flex pc:justify-between auto pc:max-w-[1000px]">
        <li
          class="border rounded-xl w-[300px] h-[300px] p-[30px] text-left mobile:mb-[40px] mobile:w-full"
        >
          <div class="w-[60px] h-[60px] mb-[20px]">
            <img src="@/assets/index/ziyou.png" alt="" />
          </div>
          <h2 class="text-[#333] text-[32px] font-bold mb-[30px]">
            {{ i18nStore.translate('index21') }}
          </h2>
          <p class="text-[#888] mobile:text-base">
            {{ i18nStore.translate('index22') }}
          </p>
        </li>
        <li
          class="border rounded-xl w-[300px] h-[300px] p-[30px] text-left mobile:mb-[40px] mobile:w-full"
        >
          <div class="w-[60px] h-[60px] mb-[20px]">
            <img src="@/assets/index/simi.png" alt="" />
          </div>
          <h2 class="text-[#333] text-[32px] font-bold mb-[30px]">
            {{ i18nStore.translate('index23') }}
          </h2>
          <p class="text-[#888] mobile:text-base">
            {{ i18nStore.translate('index24') }}
          </p>
        </li>
        <li
          class="border rounded-xl w-[300px] h-[300px] p-[30px] text-left mobile:mb-[40px] mobile:w-full"
        >
          <div class="w-[60px] h-[60px] mb-[20px]">
            <img src="@/assets/index/anquan.png" alt="" />
          </div>
          <h2 class="text-[#333] text-[32px] font-bold mb-[30px]">
            {{ i18nStore.translate('index25') }}
          </h2>
          <p class="text-[#888] mobile:text-base">
            {{ i18nStore.translate('index26') }}
          </p>
        </li>
      </ul>
    </div>

    <div class="auto pc:max-w-[1200px] mobile:text-4xl mobile:px-10">
      <h1
        class="text-[42px] font-bold text-center mt-[60px] mb-[70px] mobile:text-3xl"
      >
        {{ i18nStore.translate('index27') }}
      </h1>
      <ul>
        <li class="pc:flex pc:flex-between mb-[60px] mobile:mb-[0px]">
          <div class="left pc:w-[600px]">
            <img class="hero-light" src="@/assets/index/bgindex.png" alt="" />
          </div>
          <div
            class="right pc:p-[40px] pc:w-[600px] mobile:px-0 mobile:py-[20px]"
          >
            <h1 class="text-[36px] font-bold mb-[40px] mobile:text-3xl">
              {{ i18nStore.translate('index28') }}
            </h1>
            <p class="text-[18px] text-[#000] mb-[40px] mobile:leading-tight">
              {{ i18nStore.translate('index29') }}
            </p>
            <router-link to="/plan">
              <p class="text-lg">
                {{ i18nStore.translate('index30') }}
                <i class="pi pi-arrow-right"></i>
              </p>
            </router-link>
          </div>
        </li>
        <li
          class="pc:flex pc:flex-between mobile:flex mobile:flex-col-reverse mb-[60px] mobile:mb-[0px]"
        >
          <div
            class="right pc:p-[40px] pc:w-[600px] mobile:px-0 mobile:py-[20px]"
          >
            <h1 class="text-[36px] font-bold mb-[40px] mobile:text-3xl">
              {{ i18nStore.translate('index31') }}
            </h1>
            <p class="text-[18px] text-[#000] mb-[40px] mobile:leading-tight">
              {{ i18nStore.translate('index32') }}
            </p>
          </div>
          <div class="left pc:w-[600px]">
            <img class="hero-light" src="@/assets/index/bgindex.png" alt="" />
          </div>
        </li>
        <li class="pc:flex pc:flex-between mb-[60px] mobile:mb-[0px]">
          <div class="left pc:w-[600px]">
            <img class="hero-light" src="@/assets/index/bgindex.png" alt="" />
          </div>
          <div
            class="right pc:p-[40px] pc:w-[600px] mobile:px-0 mobile:py-[20px]"
          >
            <h1 class="text-[36px] font-bold mb-[40px] mobile:text-3xl">
              {{ i18nStore.translate('index33') }}
            </h1>
            <p class="text-[18px] text-[#000] mb-[40px] mobile:leading-tight">
              {{ i18nStore.translate('index34') }}
            </p>
            <router-link to="/login">
              <p class="text-lg">
                {{ i18nStore.translate('index35') }}
                <i class="pi pi-arrow-right"></i>
              </p>
            </router-link>
          </div>
        </li>
        <li
          class="pc:flex pc:flex-between mobile:flex mobile:flex-col-reverse mb-[60px] mobile:mb-[0px]"
        >
          <div
            class="right pc:p-[40px] pc:w-[600px] mobile:px-0 mobile:py-[20px]"
          >
            <h1 class="text-[36px] font-bold mb-[40px] mobile:text-3xl">
              {{ i18nStore.translate('index36') }}
            </h1>
            <p class="text-[18px] text-[#000] mb-[40px] mobile:leading-tight">
              {{ i18nStore.translate('index37') }}
            </p>
          </div>
          <div class="left pc:w-[600px]">
            <img class="hero-light" src="@/assets/index/bgindex.png" alt="" />
          </div>
        </li>
      </ul>
    </div>

    <div class="banner mt-[60px]">
      <Banner
        :title="i18nStore.translate('index38')"
        :button="i18nStore.translate('index40')"
        to="register"
      >
        <div class="text-[#666] mb-[20px] font-normal mobile:px-[20px]">
          {{ i18nStore.translate('index39') }}
        </div>
      </Banner>
    </div>

    <div class="auto pc:max-w-[1000px] mobile:text-4xl mobile:px-10">
      <div class="pc:flex pc:flex-between mt-[60px] mb-[60px]">
        <div class="left p-[10px]">
          <h1 class="text-[42px] font-bold mb-[40px] mobile:text-3xl">
            {{ i18nStore.translate('index41') }}
          </h1>
          <p class="text-[18px] text-[#666] mb-[40px]">
            {{ i18nStore.translate('index42') }}
          </p>
          <router-link to="/register">
            <div
              class="button w-[160px] h-[50px] leading-[50px] mb-[30px] bg-[#00E1FF] text-[#fff] text-center cursor-pointer text-lg rounded-lg"
            >
              {{ i18nStore.translate('index43') }}
            </div></router-link
          >
        </div>
        <div class="right mobile:mt-[40px]">
          <ul class="pc:border pc:p-[30px] pc:w-[500px] pc:rounded-xl">
            <li class="pc:flex pc:flex-between border-b">
              <div class="left mr-[30px]">
                <div class="w-[80px] h-[80px] mb-[30px]">
                  <img
                    class="hero-light"
                    src="@/assets/index/people.png"
                    alt=""
                  />
                </div>
              </div>
              <div class="right mobile:mb-[30px]">
                <p class="text-[18px] text-[#666]">
                  {{ i18nStore.translate('index44') }}
                </p>
                <p class="text-[42px] font-bold mobile:text-3xl">302,275,62</p>
              </div>
            </li>
            <li class="pc:flex pc:flex-between mt-[20px] mobile:mt-[40px]">
              <div class="left mr-[30px]">
                <div class="w-[80px] h-[80px] mb-[20px]">
                  <img
                    class="hero-light"
                    src="@/assets/index/yunpan.png"
                    alt=""
                  />
                </div>
              </div>
              <div class="right">
                <p class="text-[18px] text-[#666]">
                  {{ i18nStore.translate('index45') }}
                </p>
                <p class="text-[42px] font-bold mobile:text-3xl">
                  162,325,621,158
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 底部栏 -->
    <div class="foot auto pc:max-w-[1200px] mobile:px-10">
      <Foot />
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
